<script setup lang="ts">
import { getAssetsFile } from '@/utils/getAssetsFile'
import SvgIcon from './SvgIcon.vue'
import { onMounted, ref } from 'vue'
import { getDataActList } from '@/service/UserActService'

export interface IDataActList {
  imgURL: string
  title: string
  desc: string
  span1: string
  span2: string
  avatorName: string
  avatorImg: string
}
const dataActList = ref<IDataActList[]>([])
onMounted(async () => {
  // dataActList.value = []
  dataActList.value = await getDataActList()
})
</script>
<template>
  <div class="user-act">
    <div class="content">
      <a href="#" v-for="data in dataActList" :key="data.title">
        <div class="tool-infos">
          <div class="tool-t">
            <img
              :src="getAssetsFile(data.imgURL as string)"
              alt="brain-image"
              class="img"
            />
            <div class="bot-detail">
              <div class="bot-title">{{ data.title }}</div>
              <div class="bot-userInfo">
                <img
                  :src="getAssetsFile(data.avatorImg as string)"
                  alt=""
                  class="avator"
                />
                <span class="name">{{ data.avatorName }}</span>
              </div>
              <div class="bot-desc">
                {{ data.desc }}
              </div>
            </div>
          </div>
          <div class="tool-b">
            <div class="bot-icon">
              <!-- <img src="../assets/img/hot.svg" alt="" /> -->
              <SvgIcon name="hot" size="18px" />
              <span>{{ data.span1 }}</span>
              <SvgIcon name="star" size="18px" />
              <!-- <img src="../assets/img/star.svg" alt="" /> -->
              <span>{{ data.span2 }}</span>
            </div>
            <div class="bot-act">开始互动</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>
<style scoped lang="scss">
.user-act {
  width: 100%;
  .content {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;

    a {
      text-decoration: none;

      .tool-infos {
        box-sizing: border-box;
        height: 203px;
        border-radius: 4px;
        padding: 16px;
        border: 1px solid #eaedf1;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
        .tool-t {
          display: flex;
          justify-content: space-between;

          .img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin: 0 0 8px;
          }

          .bot-detail {
            width: 273px;
            margin-left: 10px;
            height: 136px;
            .bot-title {
              color: #252933;
              font-size: 18px;
              font-weight: 500;
              margin-bottom: 8px;
            }

            .bot-userInfo {
              margin-bottom: 8px;
              .avator {
                vertical-align: middle;
                width: 16px;
                height: 16px;
                line-height: 16px;
                border-radius: 50%;
                margin-right: 5px;
                margin-bottom: 0;
              }
              span {
                color: #8a919f;
                font-size: 13px;
              }
            }
            .bot-desc {
              display: -webkit-box;
              overflow: hidden;
              white-space: normal;
              text-overflow: ellipsis;
              word-wrap: break-word;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              color: #515767;
              font-size: 13px;
              font-weight: 400;
            }
          }
        }

        .tool-b {
          display: flex;
          justify-content: space-between;
          padding-top: 12px;
          border-top: 1px solid #eaedf1;

          .bot-icon {
            display: flex;
            align-items: center;
            color: #8a919f;
            line-height: 20px;

            svg {
              margin-right: 4px;
            }
            span {
              color: #8a919f;
              line-height: 20px;
              margin-right: 12px;
              font-size: 12px;
            }
          }

          .bot-act {
            box-sizing: border-box;
            width: 80px;
            height: 27px;

            text-align: center;
            line-height: 27px;

            border: none;
            outline: none;
            cursor: pointer;
            transition:
              background-color 0.3s,
              color 0.3s;

            border-radius: 4px;
            border: 1px solid rgba(30, 128, 255, 0.3);
            background: rgba(30, 128, 255, 0.05);
            color: #1e80ff;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.036px;
            &:hover {
              background-color: #0371df;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
